<template>
  <div class="f_div">
    <div class="t_div">运营管理 / <a href="#">提货单</a></div>
    <el-container>

      <el-header class="header2">
        <div class="h_div">
          <div class="h_in_vid">
            <el-form ref="form" :inline="true" :model="searchForm" class="demo-form-inline">
              <el-form-item label="始发地：">
                <el-input v-model="value" placeholder="请输入始发地"></el-input>
              </el-form-item>
              <el-form-item label="目的地：">
                <el-input v-model="value1" placeholder="请输入目的地"></el-input>
              </el-form-item>
              <el-form-item label="提货日期：">
                <el-date-picker v-model="value2" type="datetimerange" range-separator="To"
                  start-placeholder="请选择日期" end-placeholder="请选择日期" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"></el-date-picker>
              </el-form-item>
              <el-form-item label="搜索：">
            <el-input v-model="searchForm.keyword" placeholder="请输入关键字搜索"></el-input>
          </el-form-item>
          <el-form-item style="float:left">
            <el-button type="primary" @click="tjian">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>


            </el-form>
          </div>
        </div>
      </el-header>
      <el-main class="main">
        <el-table height="442px" :data="tableData" style="width: 100%" row-key="depart_id" default-expand-all stripe
          :header-cell-style="{
              background: '#F7F7F7',
              color: '#999',
              textAlign: 'center',
            }" :cell-style="{ textAlign: 'center' }">
          <el-table-column prop="bill_Id" label="提货单" width="150"></el-table-column>
          <el-table-column prop="wb_number" label="运单号" width="150"></el-table-column>
          <el-table-column prop="ord_number" label="订单号" width="150"></el-table-column>
          <el-table-column prop="customer" label="客户" width="150"></el-table-column>
          <el-table-column prop="origin_place" label="始发地" width="170"></el-table-column>
          <el-table-column prop="det_place" label="目的地" width="170"></el-table-column>
          <el-table-column prop="bill_Status" label="提货状态" width="100"> 
            <template #default="scope">
              <span>{{ formatOrderState(scope.row.bill_Status) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="pickup_address" label="发货地址" width="200"></el-table-column>
          <el-table-column prop="delivery_address" label="收货地址" width="170"></el-table-column>
          <el-table-column prop="driver_name" label="司机" width="100"></el-table-column>
          <el-table-column prop="car_number" label="车牌号" width="100"></el-table-column>
          <el-table-column prop="driver_phone" label="手机号码" width="120"></el-table-column>
          <el-table-column prop="status" label="提货数量" width="120"></el-table-column>
          <el-table-column prop="status" label="提货体积" width="120"></el-table-column>
          <el-table-column prop="status" label="提货重量" width="120"></el-table-column>
          <el-table-column prop="status" label="提货运费合计" width="120"></el-table-column>
          <el-table-column prop="pickup_time" label="提货开始时间" width="150"></el-table-column>
          <el-table-column prop="pickup_endtime" label="提货完成时间" width="150"></el-table-column>
          <el-table-column prop="plan_time" label="计划发车时间" width="150"></el-table-column>
          <el-table-column prop="reality_time" label="实际发车时间" width="150"></el-table-column>
          <el-table-column prop="planGet_time" label="计划到达时间" width="150"></el-table-column>
          <el-table-column prop="realityGet_time" label="实际到达时间" width="150"></el-table-column>
          <el-table-column prop="status" label="创建人" width="120"></el-table-column>
          <el-table-column prop="status" label="创建时间" width="120"></el-table-column>
          <el-table-column label="操作" width="220px">
            <template #default="scoped">
              <el-button type="text" size="small" @click="XQ(scoped.row.billol_Id)">详情</el-button>
              <el-button link type="danger" @click="delBill(scoped.row.billol_Id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[4, 6, 8, 10]"
            :size="size" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, reactive, resolveComponent, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";


export default {
  setup() {
    let tableData = ref([]);
    let value = ref("");
    let value1 = ref("");
    let value2 = ref("");
    let currentPage = ref("1");
    let pageSize = ref("10");


    let router = useRouter();

    function XQ(id) {
        alert(id)
        router.push({path:'/Bill_xq', query: { 
          uid:id
        }})
    }

    function formatDate(date) {
      let year = date.getFullYear();
      let month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始，所以要加1
      let day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    }

    function show() {
      axios
        .get("http://localhost:5261/api/Bill_ol/GetBill_ols?currentPage=" + currentPage.value + "&PageSize=" + pageSize.value)
        .then((res) => {
          tableData.value = res.data;
          console.log(tableData.value);
          tableData.value.forEach((item, index) => {
            item.pickup_time = new Date(item.pickup_time).toISOString().slice(0, 10).toString();
            item.pickup_endtime = new Date(item.pickup_endtime).toISOString().slice(0, 10).toString();
            item.plan_time = new Date(item.plan_time).toISOString().slice(0, 10).toString();
            item.reality_time = new Date(item.reality_time).toISOString().slice(0, 10).toString();
            item.planGet_time = new Date(item.planGet_time).toISOString().slice(0, 10).toString();
            item.realityGet_time = new Date(item.realityGet_time).toISOString().slice(0, 10).toString();
          })
        })
        .catch((err) => console.log(err));
    }

    onMounted(() => {
      show()
    });

    function tjian() {
      alert(value2.value);
      axios
        .get("http://localhost:5261/api/Bill_ol/GetBill_condition?Origin_place=" + value.value + "&Det_place=" + value1.value + "&Pickup_endtime=" + value2.value + "&currentPage=" + currentPage.value + "&pageSize=" + pageSize.value)
        .then((res) => {
          tableData.value = res.data;
          tableData.value.forEach((item, index) => {
            item.pickup_time = new Date(item.pickup_time).toISOString().slice(0, 10).toString();
          })
        })
        .catch((err) => console.log(err));
    }


    const searchForm = reactive({
      level: "1",
      dateRange: "",
      keyword: "",
    });

    let currentRow = ref(null);

    function formatOrderState(status) {
      switch (status) {
        case 0:
          return '待提货';
        case 1:
          return '已提货';
      }
    }

    function handleSearch() {
      console.log(searchForm);
    }

    function handleReset() {
      // 重置表单
      searchForm.level = "";
      searchForm.dateRange = "";
      searchForm.keyword = "";
      // 重置表格数据
      // ...
    }

    function handlePageChange(val) {
      currentPage.value = val;
    }


    function delBill(billol_Id) {
      console.log(billol_Id);
      axios
        .delete("http://localhost:5261/api/Bill_ol/DelBill", {
          params: {
            id: billol_Id
          }
        })
        .then((res) => {
          if (res.data) {
            location.reload();
            setTimeout(() => {
              ElMessage.success("删除成功！！！");
            }, 1000);
          } else {
            ElMessage.error("异常错误！");
          }
        })
        .catch((err) => console.log(err));
    }





    return {
      value,
      value1,
      value2,
      tableData,
      searchForm,
      currentPage,
      pageSize,
      handleSearch,
      handleReset,
      handlePageChange,
      delBill,
      //deleteCustomer,
      currentRow,
      show,
      tjian,
      formatOrderState,
      XQ
    };
  },
};
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}

.t_div {
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  color: #b3b4b6;
}

a {
  text-decoration: none;
}

.f_div {
  padding: 0px 50px;
}

.h_div {
  height: 39px;
}

.h_in_vid {
  width: 1400px;
  height: 20px;
  margin-top: 20px;
  display: flex;
}

.header {
  background-color: #ffffff;
  border-radius: 10px 10px 0px 0px;
}

.header2 {
  background-color: #ffffff;
}

.main {
  background-color: #ffffff;
  border-radius: 0px 0px 10px 10px;
  height: 650px;
}
.el-header{
  height: 100px;
}
</style>